<template>
	<view class="content" :style="{'min-height': (getH()-44)+'px'}">
		<view class="control">
			<uni-segmented-control :current="current" :values="items" style-type="text"
			@clickItem="onClickItem($event)" />
		</view>
		<view class="goods" v-for="item in goods" :key="item.id" v-if="current===0">
			<orderone :item="item"></orderone>
		</view>
		<view class="goods" v-for="item in goods" :key="item.id" v-if="current===1&&item.kind=='2'">
			<orderone :item="item"></orderone>
		</view>
		<view class="goods" v-for="item in goods" :key="item.id" v-if="current===2&&item.kind=='3'">
			<orderone :item="item"></orderone>
		</view>
		
		<view class="other">
			<text>已经到底啦~</text>
		</view>
	</view>
	
</template>

<script>
	import orderone from '../../subpages/orderOne/orderOne.vue'
	export default {
		data() {
			return {
				current:0,
				items: ['全部', '待使用', '已完成'],
				goods:[
					{
						id:'5145632458489',
						createTime:'2022-3-17 13:45:36',
						name:'新冠疫苗',
						price:3299,
						kind:'3',
						site:'同人医院'
					},
					{
						id:'5145632458489',
						createTime:'2022-3-17 13:45:36',
						name:'新冠疫苗',
						price:3299,
						kind:'2',
						site:'同人医院'
					},
				]
			}
		},
		components:{orderone},
		methods: {
			getH(){
				return window.screen.height; 
			},
			
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(to bottom,rgba(235,220,225,0.5),rgba(224,232,235,0.5)) ;
		.control{
			width: 100%;
		}
		.other{
			height: 90px;
			text-align: center;
			margin-top: 15px;
			color: #aaa;
		}
	}
	.goods{
		width: 85%;
		background-color: #FFFFFF;
		border-radius: 20px;
		margin: 10px 0;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
</style>
